<template>
	<view>
		<view class="box">
			<view class="logo">
				<image class="image" src="../static/icon/login/l(3).png"></image>
			</view>
			<view class="block">
				<view class="flex a-center">
					<view class="label">账　号:</view>
					<u-input v-model="phone" maxlength="11"></u-input>
				</view>
				<view class="split">
					<u-line length="592" color="#F2F2F2"></u-line>
				</view>
				<view class="flex a-center">
					<view class="label">密　码:</view>
					<u-input v-model="pwd"></u-input>
				</view>
				<view class="split">
					<u-line length="592" color="#F2F2F2"></u-line>
				</view>
				<view class="flex a-center">
					<view class="label">验证码:</view>
					<u-input v-model="code"></u-input>
					<view class="code" @tap="changeImg">
						<image class="image" :src="code_src"></image>
					</view>
				</view>
			</view>
			<view class="login-btn flex j-center a-center" @tap="login()">
				<view>登录</view>
			</view>
			<view class="flex j-between more">
				<view></view>
				<view @tap="goto('/pages/regist')">注册</view>
			</view>
		</view>
		<view class="other">
			<view class="tip">其他方式登录</view>
			<view class="logins flex j-between">
				<view class="type">
					<image class="image" src="../static/icon/login/l(1).png"></image>
				</view>
				<view class="type">
					<image class="image" src="../static/icon/login/l(2).png"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default{
	data(){
		return {
			phone:'',
			pwd:'',
			code:'',
			code_src:'https://xiaojia.jianli33.com/api/verify',
		}
	},
	methods:{
		login(){
			this.$api.login({username:this.phone,password:this.pwd,code:this.code}).then(res =>{
				console.log(res)
				this.$store.commit('SET_TOKEN', res.data.token)
				this.tabto('/pages/index')
			})
			//this.tabto('/pages/index')
		},
		changeImg() {
		  this.code_src = 'https://xiaojia.jianli33.com/api/verify?username=' + this.phone + '&' + Math.random()
		},
		changePhone() {
		  if (this.phone.length === 11) {
			this.changeImg()
		  }
		},
	},
	watch:{
		phone:function(val,old)  {
			this.changePhone()
		}
	},
}
</script>

<style lang="scss" scoped>
.box{margin: 328rpx auto 0;}
.block{width: 640rpx;padding: 32rpx 24rpx;border-radius: 16rpx;background-color: #FFF;margin: 48rpx auto 0;
	border:1rpx solid #eee;box-shadow: 10rpx 10rpx 10rpx #efefef;
	.label{width: 100rpx;color: #333;margin-right: 20rpx;}
	.split{margin: 24rpx auto;}
	.code{width:120rpx;height: 60rpx;background-color: #eee;}
}
.logo{width: 160rpx;height: 160rpx;margin: 0 auto;}
.phone{color: #333;font-size: 48rpx;font-weight: bold;margin: 68rpx auto 0;text-align: center;}
.tip{color: #999;text-align: center;font-size: 24rpx;margin-top: 24rpx;}
.login-btn{width: 640rpx;height: 88rpx;color: #FFF;font-size: 32rpx;border-radius: 16rpx;
	box-shadow: 0px 12px 12px rgba(36, 111, 221, 0.16);margin: 48rpx auto 0;
	background-color: #246FDD;
}
.more{padding:30rpx 55rpx 0;font-size: 20rpx;}
.login-btn-other{width: 640rpx;height: 88rpx;color: #333;font-size: 28rpx;border-radius: 16rpx;
	margin: 48rpx auto 0;
}
.other{margin-top: 200rpx;
	.logins{width: 220rpx;margin: 48rpx auto 0;
		.type{width:60rpx;height: 60rpx;}
	}
}
</style>
